<template>
	<div class="item-contact">
		<ul class="ul-contact" ref="contactlist">
			<li class="li-contact animate-itemSlideIn" v-for="item in items">
				<dl class="flex-box">
					<dd class="flex-item"><i class="icon-contactAvatar"></i></dd>
					<dd class="flex-item"><span class="name">{{item.name}}</span><span class="mobile">{{item.mobile}}</span></dd>
					<dd class="flex-item" @click="go(departmentId, item.contactId)"><i class="icon-edit"></i></dd>
				</dl>
			</li>
		</ul>
	</div>
</template>

<script>
export default {

  name: 'item-contact',

  props: {
  	items: [Object, Array],
  	departmentId: String
  },

  mounted () {
  	this.$nextTick(() => {
  		this.longPressEvent();
  	});
  },

  methods: {
  	go (departmentId, id) {
  		this.$router.push({
  			name: 'contact_edit', 
  			params: {
  				departmentId: departmentId,
  				id: id
  			}
  		});
  	},

  	longPressEvent () {
		let $contactlist = this.$refs.contactlist,
  			timeCount = 0,
  			intervalCount = null;

  		$contactlist.addEventListener('touchstart', e => {
  			timeCount = 0;
  			this.bus.$emit('showLongPressMask', false);
  			intervalCount = setInterval(() => {
  				timeCount = Number(timeCount) + 10;
  				if (timeCount>800) {
  					this.bus.$emit('showLongPressMask', true);
  					clearInterval(intervalCount)
  				} else {
  					this.bus.$emit('showLongPressMask', false);
  				}
  			}, 10);
  		});

  		$contactlist.addEventListener('touchmove', e => {
  			clearInterval(intervalCount)
  		});

  		$contactlist.addEventListener('touchend', e => {
  			clearInterval(intervalCount)
  		})
  	}
  }
};
</script>

<style lang="scss" scoped>
	@import '../../scss/mixin.scss';
	.item-contact{
		.ul-contact{
			.li-contact{
        width: 100%;
				height: 100px;
				line-height: 100px;
				font-size: 28px;
        color: #333333;
        display: inline-block;
				-webkit-user-select: none;
  				user-select: none;
				dd:first-child{
					&:after{
						border: none !important;
					}
				}
				&:active{
					background: rgb(243, 243, 243);
				}
        .name{
          // line-height: 60px;
        }
        .mobile{
          margin-left: 10px;
          font-size: 24px;
          color: #ccc;
        }
			}
		}
	}
  .flex-box{
    .flex-item{
      -webkit-user-select: none;
          user-select: none;
      &:last-child{
        flex-basis: 80px !important;
        min-width: 80px !important;
      }
    }
  }
</style>